<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../baselayout/import.jsp"%>
<%@ taglib uri="http://www.bjtu.edu.cn/taglibs" prefix="wt"%>
<style>
.col-center-block {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

</style>
<div id="classes" class="r" style="margin: 6px"></div>

<div class="panel panel-primary">
  <div class="panel-heading">文本分类</div>
  <div class="panel-body text-center">
  		<form id="predict" action="${staticPath}/admin/doc/predict.do" method="post" target="_blank">
			<textarea style="width: 100%; min-height: 200px" id="text" name="doc"></textarea>
			<button type="submit" class="btn btn-primary" style="margin-top:10px">文本分类</button>
		</form>
		<p class="text-left">分类结果展示区</p>
		<svg></svg>
		<div>
			<button  type="button" class="btn btn-default glyphicon glyphicon-ok"  id="agree">赞同</button>
			<button  type="button" class="btn btn-default glyphicon glyphicon-remove"  id="disagree">不赞同</button>
		</div>
  </div>
</div>	
<script type="text/javascript" src="${staticPath}/js/d3.js"></script>
<script>
!function(){
	var btn = "<button type=\"button\" class=\"btn btn-default\"></button>";
	var sWidth = '400px';
	var sHeight = '400px';
	var yAxisOff = 80;
	var xAxisOff = 150+20;
	
	var itemHeight = 30;

	
	var options = {
		resetForm : false,
		dataType : 'json',
		success : function(data) {
			$("#classes").children().each(function() {
				$(this).remove();
			});
			data = JSON.parse(data);
			result = Array.prototype.slice.call(data.data,0,4);
			var names = result.map(function(x){return x.labelName;});
			sfunc = d3.scaleLinear().domain([0,1]).range([0,400-xAxisOff]);
			lfunc = d3.scaleOrdinal().domain(names).range([17.5,52.5,87.5,122.5]);
			//lfunc = d3.scaleQuantize().domain(names).range([0,1,2,3]);
			//只显示前4个结果
			console.log(result);
			var xAxis = d3.axisBottom(sfunc);
			var yAxis = d3.axisLeft(lfunc).tickValues(names);
			var svg = d3.select("svg");
			svg.selectAll('*').remove();
			svg.style('width',sWidth)
			.style('height',sHeight)
			.selectAll("r")
			.data(result)
			.enter()
			.append("rect")
			.attr("x",yAxisOff+5)
			.attr("y",function(d,i){ return i *35 + 20})
			.attr("width",function(d,i){return sfunc(d.val);})
			.attr("height",itemHeight)
			.attr("fill","steelblue");
			//x轴
			svg.append("g")
			.call(xAxis)
			.attr('transform',"translate(85,"+xAxisOff+")");
			//y轴
			svg.append("g")
			.call(yAxis)
			.attr('transform',"translate("+yAxisOff+",20)");
			
		},
	};
	$('#predict').submit(function() {
		$(this).ajaxSubmit(options);
		return false;
	});
	$("#agree").click(function(){
		//发送文档到后台添加到神经网络更新列表里面
	});
	$("#disagree").click(function(){});
}();
</script>
